/* * @moudule:@/views/home/analysisOrder * @author:zengfx * @date:2020-10-28 *
存量环比分析清单 */

<template>
  <div class="analysisOrder_container">
    <el-form :inline="true" :model="formInline" class="main_searchBar">
      <el-form-item label="月份:">
        <el-date-picker
          size="mini"
          v-model="formInline.acctMonth"
          value-format="yyyyMM"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
      </el-form-item>
      <el-form-item label="客户群:">
        <el-select size="mini" v-model="formInline.maintainGroup1" style="width: 100px">
          <el-option v-for="(item, index) in customerList" :key="index" :label="item.indexName" :value="item.maintainGroup1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="search()" id="search_btn">查询</el-button>
        <el-button size="mini" type="success" id="export_btn" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <header>
      <p>存量环比分析清单</p>
    </header>
    <ux-grid
      ref="plxTable"
      :height="height"
      id="table"
      size="mini"
      :header-row-style="{ background: '#eef1f6' }"
      border
      :stripe="true"
      :widthResize="true"
      style="width: 100%"
      v-loading="showTableLoading"
      show-overflow="tooltip"
      show-header-overflow="title"
    >
      <ux-table-column type="index" width="60" title="序号" fixed="left" align="center" />
      <ux-table-column fixed="left" field="c4AreaName" title="县局" min-width="120"></ux-table-column>
      <ux-table-column fixed="left" field="c5AreaName" title="分支局" min-width="180"></ux-table-column>
      <ux-table-column fixed="left" field="c6AreaName" title="片区" min-width="150"></ux-table-column>
      <ux-table-column field="staffName" title="客户经理" width="100"></ux-table-column>
      <ux-table-column field="crmCustId" title="客户编号" min-width="140"></ux-table-column>
      <ux-table-column field="custName" title="客户名称" width="100"></ux-table-column>
      <ux-table-column field="vipCard" title="VIP卡号" width="100"></ux-table-column>
      <ux-table-column field="custType" title="客户类型" min-width="100"></ux-table-column>
      <ux-table-column field="maintainGroup1" title="客户群" min-width="130"></ux-table-column>
      <ux-table-column field="t1Cnt" title="资产数" sortable min-width="100"></ux-table-column>
      <ux-table-column field="t1CdmaCnt" title="移动资产数" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CdmaActCnt" title="活跃移动资产数" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t1KdCnt" title="宽带资产数" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1KdActCnt" title="活跃宽带资产数" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t1ItvCnt" title="ITV资产数" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t1ItvActCnt" title="活跃ITV资产数" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t0Cnt" title="上月资产数" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t0CdmaCnt" title="上月移动资产数" sortable min-width="150"></ux-table-column>
      <ux-table-column field="t0CdmaActCnt" title="上月活动移动资产数" sortable min-width="170"></ux-table-column>
      <ux-table-column field="t0KdCnt" title="上月宽带资产数" sortable min-width="150"></ux-table-column>
      <ux-table-column field="t0KdActCnt" title="上月活跃宽带资产数" sortable min-width="170"></ux-table-column>
      <ux-table-column field="t0ItvCnt" title="上月ITV资产数" sortable min-width="150"></ux-table-column>
      <ux-table-column field="t0ItvActCnt" title="上月活跃ITV资产数" sortable min-width="160"></ux-table-column>
      <ux-table-column field="t1Amt" title="T-1月收入" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t0Amt" title="T-2月收入" sortable min-width="120"></ux-table-column>
      <ux-table-column field="hxptFeeB3" title="T-3月收入" sortable min-width="120"></ux-table-column>
      <ux-table-column field="hxptFeeB4" title="T-4月收入" sortable min-width="120"></ux-table-column>
      <ux-table-column field="monthON" title="环比收入" sortable min-width="120"></ux-table-column>
      <ux-table-column field="cprdName" title="下降最多资产类型" sortable min-width="140"></ux-table-column>
      <ux-table-column field="promName" title="资产对应的套餐" sortable min-width="240"></ux-table-column>
      <ux-table-column field="assetT0Amt" title="资产T0" sortable min-width="100"></ux-table-column>
      <ux-table-column field="assetT1Amt" title="资产T1" sortable min-width="100"></ux-table-column>
      <ux-table-column field="assetsOn" title="资产环比" sortable min-width="100"></ux-table-column>
      <ux-table-column field="avgHxptFee19" title="客户上一年月均" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t1CzFeereduce" title="OCS出账环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce0" title="OCS调账环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce1" title="OCS赠送环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce2" title="OCS欠费环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce3" title="OCS收回环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce4" title="分摊收入环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce5" title="OOCP营收环比" sortable min-width="130"></ux-table-column>
      <ux-table-column field="t1CzFeereduce6" title="其他来源环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce7" title="套餐离网环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce8" title="套餐新增环比" sortable min-width="120"></ux-table-column>
      <ux-table-column field="t1CzFeereduce9" title="套餐在网环比" sortable min-width="120"></ux-table-column>
    </ux-grid>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 400, 800, 1600,10000]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      formInline: {
        areaId: "",
        acctMonth: "",
        sort: "",
        upAndDown: "",
        maintainGroup1: "全量",
        pageNum: 1,
        pageSize: 100,
      },
      total: undefined,
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      showTableLoading: false,
      height: window.innerHeight - 60 - 30 - 175,
      tableData: [],
      customerList: [
        {
          indexName: "全量",
          maintainGroup1: "全量",
        },
        {
          indexName: "政企客户部",
          maintainGroup1: "政企客户部",
        },
        {
          indexName: "公众客户群0-3星",
          maintainGroup1: "公众客户群0-3星",
        },
        {
          indexName: "公众客户群4-7星",
          maintainGroup1: "公众客户群4-7星",
        },
      ],
    };
  },
  methods: {
    getMonth() {
      $budgetAPI.incomeKeepRegionalMonth(
        { maximum: 4 },
        (res) => {
          if (res.code == 0) {
            this.formInline.acctMonth = res.content;
            this.disabledTime = res.content;
            this.inventory();
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 175;
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
    inventory() {
      this.showTableLoading = true;
      $budgetAPI.inventory(
        this.formInline,
        (res) => {
          if (res.code == 0) {
            this.tableData = res.content.data;
            this.total = res.content.total;
            this.$refs.plxTable.reloadData(this.tableData);
          } else {
            this.tableData = [];
            this.$refs.plxTable.reloadData([]);
            this.total = 0;
          }
          this.showTableLoading = false;
        },
        (err) => {
          this.tableData = [];
          this.showTableLoading = false;
        }
      );
    },
    search() {
      this.inventory();
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.inventory();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.inventory();
    },
    handle_export() {
      let fields = {
        c4AreaName: "县局",
        c5AreaName: "分支局",
        c6AreaName: "片区",
        staffName: "客户经理",
        crmCustId: "客户编号",
        custName: "客户名称",
        vipCard: "VIP卡号",
        custType: "客户类型",
        maintainGroup1: "客户群",
        t1Cnt: "资产数",
        t1CdmaCnt: "移动资产数",
        t1CdmaActCnt: "活跃移动资产数",
        t1KdCnt: "宽带资产数",
        t1KdActCnt: "活跃宽带资产数",
        t1ItvCnt: "ITV资产数",
        t1ItvActCnt: "活跃ITV资产数",
        t0Cnt: "上月资产数",
        t0CdmaCnt: "上月移动资产数",
        t0CdmaActCnt: "上月活动移动资产数",
        t0KdCnt: "上月宽带资产数",
        t0KdActCnt: "上月活跃宽带资产数",
        t0ItvCnt: "上月ITV资产数",
        t0ItvActCnt: "上月活跃ITV资产数",
        t1Amt: "T-1月收入",
        t0Amt: "T-2月收入",
        hxptFeeB3: "T-3月收入",
        hxptFeeB4: "T-4月收入",
        monthON: "环比收入",
        cprdName: "下降最多资产类型",
        promName: "资产对应的套餐",
        assetT0Amt: "资产T0",
        assetT1Amt: "资产T1",
        assetsOn: "资产环比",
        avgHxptFee19: "客户上一年月均",
        t1CzFeereduce: "OCS出账环比",
        t1CzFeereduce0: "OCS调账环比",
        t1CzFeereduce1: "OCS赠送环比",
        t1CzFeereduce2: "OCS欠费环比",
        t1CzFeereduce3: "OCS收回环比",
        t1CzFeereduce4: "分摊收入环比",
        t1CzFeereduce5: "OOCP营收环比",
        t1CzFeereduce6: "其他来源环比",
        t1CzFeereduce7: "套餐离网环比",
        t1CzFeereduce8: "套餐新增环比",
        t1CzFeereduce9: "套餐在网环比",
      };
      this.loading = this.$loading({
        lock: true,
        text: "导出中,数据量超大,请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { formInline } = this;
      $budgetAPI.inventory(
        { ...formInline, pageNum: 1, pageSize: 999999 },
        (res) => {
          this.loading.close();
          if (res.code == 0) {
            let data = res.content.data;
            data.forEach((item) => {
              for (let i in item) {
                if (fields.hasOwnProperty(i)) {
                  item[fields[i]] = item[i];
                }
                delete item[i]; //删除原先的对象属性
              }
            });

            let workbook = XLSX.utils.book_new();
            let ws = XLSX.utils.json_to_sheet(data, {
              header: Object.values(fields),
            });
            XLSX.utils.book_append_sheet(workbook, ws, "存量环比分析清单");
            let wbOut = XLSX.write(workbook, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                new Blob([wbOut], {
                  type: "application/octet-stream",
                }),
                "存量环比分析清单" + ".xlsx" //Demo.xlsx为导出的表格的名称
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbOut);
            }
            return wbOut;
          }
        },
        (err) => {
          this.loading.close();
        }
      );
    },
  },

  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    this.getMonth();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.analysisOrder_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
